Rodrigo

No problem, we'd love to help as much as possible, but is a matter of not having enough time to provide that for all our users. We love challenges as much as the next person, but it would be impossible to have enough time to go through all the issues of all our users and come up with amazing demos and solutions for their issues and needs. That being said if you run into any issues in this or any other project, please don't hesitate to ask in the forums, we're always here to help as much as we can. Happy Tweening!

Yeah, unfortunately we don't have the time resources to go through all your code (HTML/CSS/JS) and solve the issues you could have, is beyond the scope of the help we provide in these free forums. I already provided a simple working demo that should be enough for getting started and accomplish what you're trying to do. We offer paid consulting services and you can post in the Jobs & Freelance forums as well, in order to get help there. My best guess is that the way you're handling your elements with the class toggle could be the issue here, since there is a layout jump. I would advice you to start with something simple and small first and then move up and add more functionality to it. Happy Tweening!

Hi, The only reason to call ScrollTrigger's refresh method is when something changes the height of the document. Sure enough there could be many reasons why that happens, but that's exactly when it should be called. We understand that sometimes is hard to know when that happens, but then comes the development challenge of being able to track that somehow. After the layout shift is completed, you call the refresh method. Hopefully this clear things up. Happy Tweening!

Hi, An Observer Plugin instance is no different than any other GSAP instance, so is better to handle it in the same way we suggest in our learning center, that is using the useGSAP hook for it: useGSAP(() => { const myObserver = Observer.create({ ... }); }); Now based on the code you're passing I'm not 100% sure what's the idea, since you're updating a state property, probably I'd try to solve that using React's synthetic events instead of Observer. Now if your code works as expected, then just keep it: "If is not broken, don't fix it". Happy Tweening!

Yep I agree 100% with @mvaneijgen about using just ScrollTrigger for this instead of position: sticky. Have a look at these demos, maybe they can provide some starting point: https://codepen.io/GreenSock/pen/XWOJGVV https://codepen.io/GreenSock/pen/LYvEYGj Hopefully this helps. Happy Tweening!

Hi, That mostly seems related to finding the element with the mouse interaction and position the slides correctly in order to expand/contract them and make the expanded one fully visible. Maybe this demo by @Carl can provide some inspiration: https://codepen.io/snorkltv/pen/YzGpXWO This is a not the simplest thing to achieve since there are a lot of factors that come into play in terms of HTML/CSS and JS logic as well. Unfortunately we don't have the time resources to provide general consulting or create custom demos for our users, is beyond the help we can give in these free forums. We offer paid consulting services and you can post in the Jobs & Freelance forum in order to get help there if you want. Happy Tweening!

Hi, There are almost 300 lines of code in your demo and Barba is not defined there, so there is an error indicating that. On top of that there is no scrolling available in your demo so there is not a lot for us to test. I'd recommend you to check this series of videos by @Ihatetomatoes: Once we see a small working demo that clearly illustrates the issue you're having, we'll be able to take it from there. Happy Tweening!

Hi, Yeah as I mentioned in my previous post this is not the simplest thing to achieve. It would probably require a combination of ScrollTrigger, MotionPath and MorphSVG. I would recommend you to start creating the Timeline first, with the cards and the rest of the Plugins first (MotionPath and MorphSVG) then when you have the effect you need/want, plug ScrollTrigger into it in order to make it all scroll-controlled. Unfortunately we don't have the time resources to create this for you, it's beyond the scope of the help we provide in these free forums and I can't recall a demo like this, that could serve as a starting point. We offer paid consulting services and you can post in the Jobs & Freelance forums in order to get help there. Happy Tweening!

Hi, I'm not completely sure about what you're trying to do here, maybe something like this: https://codepen.io/GreenSock/pen/XWzRraJ One issue I can see in your code is this: tl.fromTo([outerWrappers[index], innerWrappers[index]], { yPercent: i => i ? -100 * dFactor : 100 * dFactor }, { yPercent: 0 }, 0) .fromTo(images[index], { yPercent: 15 * dFactor }, { yPercent: 0 }, 0) .from( headings, { // HERE scrollTrigger: { trigger: sections, onEnter: function() { gsap.set( headings, { y: 140 }); }, onLeave: function() { gsap.set( headings, { y: 140 }); } } }); You have a ScrollTrigger config inside a Timeline child instance, that is a logical problem as explained in our Learning Center: https://gsap.com/resources/st-mistakes/#nesting-scrolltriggers-inside-multiple-timeline-tweens Also I'm fuzzy about why you need/want a ScrollTrigger config in there since everything is being ran by the Observer Plugin. Happy Tweening!

Hi, I'm not 100% sure I follow what you're trying to achieve here, but maybe something like this: https://codepen.io/GreenSock/pen/BaowPwo Hopefully this helps. Happy Tweening!

Hi @Raj2100 and welcome to the GSAP Forums! I don't have time to re-create the entire demo for you, but hopefully this helps in some way: https://stackblitz.com/edit/vitejs-vite-ngqfhc The recommendation I can give you is to store the state on every click event and not just once in the lifecycle of the component like you're doing right now. Also keep in mind that you can get the state of multiple elements and animate all of them with a single Flip.from() instance. Hopefully this helps. Happy Tweening!

Hi, Unfortunately I don't have any experience with GitLab's pipelines so I couldn't really tell you about that. Are you getting the right values for the token when using a environmental variable? Also I'm curious about the fact that you tried the .tgz file route and didn't worked. Since you're using a private repo that should work as expected as far as I know. Maybe delete your .npmrc file, uninstall the GSAP package, delete your package-lock.json file and then install using the .tgz file you can find in your download from your account's dashboard. Then modify your yaml file in order to use that route. Finally is worth noticing that when using the transpile flag in the build config object there is no need to import from the dist folder, just import regularly: import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Hopefully this helps. Happy Tweening!

Yeah those demos are only to show how that can be achieved, but specific styling is something you should sort out based on the needs you have. If you keep having issues, remember to include a minimal demo that clearly illustrates the problem you're facing. Happy Tweening!

Hi, In Nuxt 2 you need to setup the config file in order to tell Nuxt to transpile GSAP, like this: export default { // Build Configuration: https://go.nuxtjs.dev/config-build build: { transpile: ['gsap'], }, }; You can check this starter template using Nuxt2: https://stackblitz.com/edit/nuxt-starter-xvx9ux?file=nuxt.config.js Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure I follow what you're trying to do, but maybe something like this: https://codepen.io/GreenSock/pen/ZENgQRj Hopefully this helps. Happy Tweening!